<script setup>
import {ref,onMounted} from 'vue'
import {check, getCaptcha, getLoginMessageCaptcha, getRegisterMessageCaptcha, login, loginBySms, register} from '@/api/UserApi'
import { ElMessage } from 'element-plus'
import router from '@/router'
import { useUserStore } from '@/stores'
const showLogin = ref(true)

const imgData = ref('')
const imgKey = ref('')

const loginFrom = ref({
  username: '',
  password: '',
  captchaKey: '',
  captcha: '',
  code: ''
})


//dsdhasuihfguasbcbchdsjhjs
onMounted(() => {
  const userStore = useUserStore()
  if(userStore.token){
    router.push('/')
  }
  refreshCaptcha()
})

const onLogin = async () => {
  loginFrom.value.captchaKey = imgKey.value
  refreshCaptcha()
  const res = await login(loginFrom.value)
  console.log(res)
  ElMessage({
    message: '登录成功',
    type: 'success'
  })
  router.push('/file')
}

const refreshCaptcha = async () => {
  const res = await getCaptcha()
  imgData.value = res.data.data.base64Image
  imgKey.value = res.data.data.key
}

const showRegister1 = ref(false)
const changeToRegister1 = () => {
  showLogin.value = false
  showRegister1.value = true
  refreshCaptcha()
}

const registerForm = ref({
  username: '',
  phone: '',
  password: '',
  code: '',
  captchaKey: '',
  captcha: '',
})

const count = ref(0)
let interval = null
const msg = ref('获取验证码')
const getRegMsgCaptcha = async () => {
  refreshCaptcha()
  const res = await getRegisterMessageCaptcha({
    phone: registerForm.value.phone,
    captcha: registerForm.value.captcha,
    captchaKey: imgKey.value
  })

  ElMessage({
    type: 'success',
    message: '请求验证码成功'
  })
  count.value = 61
  interval = setInterval(() => {
    count.value --
    msg.value = count.value + 's'
    if(count.value < 0){
      clearInterval(interval)
      msg.value = '获取验证码'
    }
  },1000)
}

const getLoginMsgCaptcha = async () => {
  refreshCaptcha()
  const res = await getLoginMessageCaptcha({
    phone: loginFrom.value.username,
    captcha: loginFrom.value.captcha,
    captchaKey: imgKey.value
  })

  ElMessage({
    type: 'success',
    message: '请求验证码成功'
  })
  count.value = 181
  interval = setInterval(() => {
    count.value --
    msg.value = count.value + 's'
    if(count.value < 0){
      clearInterval(interval)
      msg.value = '获取验证码'
    }
  },1000)
}

const showRegister2 = ref(false)
const onCheck = async () => {
  refreshCaptcha()
  const res = await check({
    phone: registerForm.value.phone,
    code: registerForm.value.code
  })

  ElMessage({
    type: 'success',
    message: '认证成功，请设置用户名和密码'
  })
  showRegister1.value = false
  showRegister2.value = true
}

const repassword = ref('')
const onRegister = async () => {
  if(repassword.value != registerForm.value.password){
    ElMessage({
      type: 'error',
      message: '确认密码与密码不一致，请重试'
    })
    return
  }

  const res = await register({
    username: registerForm.value.username,
    password: registerForm.value.password,
    phone: registerForm.value.phone,
  })

  ElMessage({
    type: 'success',
    message: '注册成功'
  })

  showRegister2.value = false
  showLogin.value = true
}

const defaultLogin = ref('1')
const onSelect = (index) => {
  defaultLogin.value = index
  refreshCaptcha()
}

const onLoginBySms = async () => {
  const res = await loginBySms({
    phone: loginFrom.value.username,
    code: loginFrom.value.code
  })

  ElMessage({
    message: '登录成功',
    type: 'success'
  })

  router.push('/file')
}

const backtologin = () => {
  showRegister1.value = false
  showLogin.value = true
  refreshCaptcha()
}
</script>

<template>
    <div class="container">
      <img src="@/assets/login1.png" alt="" class="background-wrap">
      <div class="login-wrap" v-show="showLogin">
        <div class="title">登 录</div>
        <el-menu mode="horizontal" :default-active="defaultLogin" @select="onSelect" class="menu" background-color="#d2c3aa" active-text-color="#836347" text-color="#b89976">
          <el-menu-item index="1">账号密码登录</el-menu-item>
          <el-menu-item index="2">短信验证登录</el-menu-item>
        </el-menu>
        <div class="login-by-username" v-show="defaultLogin === '1'">
          <input type="text" class="username-wrap" placeholder="用户名或手机号" v-model="loginFrom.username">
          <input type="password" class="password-wrap" placeholder="密码" v-model="loginFrom.password">     
          <input type="text" class="captcha-wrap" placeholder="请输入验证码" v-model="loginFrom.captcha">
          <img :src="imgData" alt="" class="login-captcha-img" @click="refreshCaptcha">
          <button class="register-btn" @click="changeToRegister1">注册</button>
          <button class="login-btn" @click="onLogin">登录</button>
        </div>

        <div class="login-by-sms" v-show="defaultLogin === '2'">
          <input type="text" class="username-wrap" placeholder="手机号" v-model="loginFrom.username">
          <input type="text" class="captcha-wrap" placeholder="请输入验证码" v-model="loginFrom.captcha">
          <img :src="imgData" alt="" class="login-captcha-img" @click="refreshCaptcha">
          <input type="text" class="message-wrap" placeholder="请输入验证码" v-model="loginFrom.code">
          <button class="message-btn" @click="getLoginMsgCaptcha" :disabled="count > 0">{{ msg }}</button>
          <button class="register-btn" @click="changeToRegister1">注册</button>
          <button class="login-btn" @click="onLoginBySms">登录</button>
        </div>

      </div>
      <div class="register-wrap" v-show="showRegister1">
        <div class="title">注 册</div>
        <input type="text" class="phone-wrap" placeholder="手机号" v-model="registerForm.phone">
        <input type="text" class="captcha-wrap" placeholder="请输入图形验证码" v-model="registerForm.captcha">
        <img :src="imgData" alt="" class="captcha-img" @click="refreshCaptcha">
        <input type="text" class="message-wrap" placeholder="请输入验证码" v-model="registerForm.code">
        <button class="message-btn" @click="getRegMsgCaptcha" :disabled="count > 0">{{ msg }}</button>
        <button class="check-btn" @click="onCheck">确认</button>
        <p @click="backtologin" class="backtologin">已有账号？返回登录</p>
      </div>
      <div class="register-wrap" v-show="showRegister2">
        <div class="title">注 册</div>
        <input type="text" class="username-wrap" placeholder="用户名" v-model="registerForm.username">
        <input type="password" class="password-wrap" placeholder="密码" v-model="registerForm.password">
        <input type="password" class="repassword-wrap" placeholder="确认密码" v-model="repassword">
        <button class="check-btn" @click="onRegister">注册</button>
      </div>
    </div>
</template>
  
<style scoped>
  .container {
    position: relative;
    width: 100vw;
    height: 100vh;
    margin: 0 auto;
  }
  
  .background-wrap {
    position: absolute;
    width: 2000px;
    height: 1000px;
    z-index: 1;
  }

  .login-wrap {
    position: absolute;
    width: 481px;
	  height: 732px;
    left: 488px;
    top: 135px;
	  background-color: #d2c3aa;
	  border-radius: 50px;
	  border: solid 1px #545533;
    z-index: 10;
  }

  .login-wrap .title {
    position: absolute;
    height: 40px;
    text-align: center;
    font-size: 40px;
    font-family: SimHei;
	  font-stretch: normal;
    color: #f7eedf;
    top: 88px;
    left: 197px;
    overflow: hidden;
  }

  .login-wrap .menu {
    height: 60px;
    position: absolute;
    width: 400px;
    top: 160px;
    left: 84px;
    border: 0px;
  }

  .login-wrap .el-menu-item {
    font-size: 20px;
  }

  .login-wrap .username-wrap {
    position: absolute;
    height: 46px;
    width: 350px;
    top: 253px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #dcd3c3;
	  border-radius: 150px;
	  border: solid 1px #a57c52;
    padding-left: 25px;
    color: #a57c52;
    font-size: 150%;
    overflow: hidden;
  }

  .login-wrap .username-wrap::placeholder {
    color: #a57c52;
  }

  .login-wrap .password-wrap {
    position: absolute;
    height: 46px;
    width: 350px;
    top: 358px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #dcd3c3;
	  border-radius: 150px;
	  border: solid 1px #a57c52;
    padding-left: 25px;
    color: #a57c52;
    font-size: 150%;
    overflow: hidden;
  }

  .login-wrap .password-wrap::placeholder {
    color: #a57c52;
  }

  .login-wrap .captcha-wrap {
    position: absolute;
    height: 46px;
    width: 200px;
    top: 462px;
    left: 60px;
    background-color: #dcd3c3;
	  border-radius: 150px;
	  border: solid 1px #a57c52;
    padding-left: 25px;
    color: #a57c52;
    font-size: 150%;
    overflow: hidden;
  }

  .login-wrap .captcha-wrap::placeholder {
    color: #a57c52;
  }

  .login-wrap .login-captcha-img {
    position: absolute;
    top: 462px;
    left: 310px;
  }

  .login-wrap .register-btn {
    position: absolute;
    background-color: #e5e0d6;
	  border-radius: 150px;
	  border: solid 1px #a57c52;
    height: 46px;
    width: 150px;
    top: 565px;
    left: 60px;
    color: #a57c52;
    font-size: 150%;
  }

  .login-wrap .login-btn {
    position: absolute;
    background-color: #e5e0d6;
	  border-radius: 150px;
	  border: solid 1px #a57c52;
    height: 46px;
    width: 200px;
    top: 565px;
    left: 230px;
    color: #a57c52;
    font-size: 150%;
  }

  .login-wrap .login-by-sms .captcha-wrap {
    position: absolute;
    height: 46px;
    width: 200px;
    top: 356px;
    left: 60px;
    background-color: #dcd3c3;
	  border-radius: 150px;
	  border: solid 1px #a57c52;
    padding-left: 25px;
    color: #a57c52;
    font-size: 150%;
    overflow: hidden;
  }

  .login-wrap .login-by-sms .captcha-wrap::placeholder {
    color: #a57c52;
  }

  .login-wrap .login-by-sms .login-captcha-img {
    position: absolute;
    top: 356px;
    left: 310px;
  }

  .login-wrap .message-wrap {
    position: absolute;
    height: 57px;
    width: 345px;
    top: 460px;
    left: 60px;
    background-color: #dcd3c3;
	  border-radius: 150px;
	  border: solid 1px #a57c52;
    padding-left: 25px;
    color: #a57c52;
    font-size: 150%;
    overflow: hidden;
  }

  .login-wrap .message-wrap::placeholder {
    color: #a57c52;
  }

  .login-wrap .message-btn {
    position: absolute;
    height: 59px;
    width: 136px;
    top: 460px;
    left: 295px;
    border-radius: 23px;
    font-size: 120%;
	  border: solid 1px #a57c52;
    background-color: #d2c3aa;
    color: #a57c52;
  }

  .register-wrap {
    position: absolute;
    width: 500px;
	  height: 760px;
    left: 1040px;
    top: 100px;
	  background-color: #d2c3aa;
	  border-radius: 50px;
	  border: solid 1px #545533;
    z-index: 10;
  }

  .register-wrap .title {
    position: absolute;
    height: 76px;
    text-align: center;
    font-size: 300%;
    font-family: SimHei;
	  font-stretch: normal;
    color: #f7eedf;
    top: 99px;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
  }

  .register-wrap .phone-wrap {
    position: absolute;
    height: 53px;
    left: 75px;
    width: 355px;
    top: 205px;
    background-color: #d2c3aa;
    color: #a57c52;
    font-size: 150%;
    overflow: hidden;
    border: none;
    border-bottom: #a57c52 solid 1px;
  }

  .register-wrap .phone-wrap::placeholder {
    color: #a57c52;
  }

  .register-wrap .backtologin {
    position: absolute;
    font-family: MicrosoftYaHeiLight;
    text-decoration: underline;
    font-size: 20px;
    font-weight: bold;
    font-stretch: normal;
    letter-spacing: 4px;
    color: #a57c52;
    top: 593px;
    left: 227px;
  }

  .register-wrap .captcha-wrap {
    position: absolute;
    height: 53px;
    left: 75px;
    width: 355px;
    top: 289px;
    background-color: #d2c3aa;
    color: #a57c52;
    font-size: 150%;
    overflow: hidden;
    border: none;
    border-bottom: #a57c52 solid 1px;
  }

  .register-wrap .captcha-wrap::placeholder {
    color: #a57c52;
  }

  .register-wrap .captcha-img {
    position: absolute;
    top: 296px;
    left: 310px;
  }

  .register-wrap .message-wrap {
    position: absolute;
    height: 53px;
    left: 75px;
    width: 355px;
    top: 395px;
    background-color: #d2c3aa;
    color: #a57c52;
    font-size: 150%;
    overflow: hidden;
    border: none;
    border-bottom: #a57c52 solid 1px;
  }

  .register-wrap .message-wrap::placeholder {
    color: #a57c52;
  }

  .register-wrap .message-btn {
    position: absolute;
    height: 46px;
    width: 140px;
    top: 403px;
    left: 290px;
    border-radius: 23px;
    font-size: 120%;
	  border: solid 1px #a57c52;
    background-color: #d2c3aa;
    color: #a57c52;
  }

  .register-wrap .check-btn {
    position: absolute;
    height: 53px;
    width: 355px;
    top: 500px;
    left: 70px;
    border-radius: 23px;
    font-size: 150%;
	  border: solid 1px #a57c52;
    background-color: #e5e0d6;
    color: #a57c52;
  }

  .register-wrap .username-wrap {
    position: absolute;
    height: 53px;
    left: 75px;
    width: 355px;
    top: 205px;
    background-color: #d2c3aa;
    color: #a57c52;
    font-size: 150%;
    overflow: hidden;
    border: none;
    border-bottom: #a57c52 solid 1px;
  }

  .register-wrap .username-wrap::placeholder {
    color: #a57c52;
  }

  .register-wrap .password-wrap {
    position: absolute;
    height: 53px;
    left: 75px;
    width: 355px;
    top: 304px;
    background-color: #d2c3aa;
    color: #a57c52;
    font-size: 150%;
    overflow: hidden;
    border: none;
    border-bottom: #a57c52 solid 1px;
  }

  .register-wrap .password-wrap::placeholder {
    color: #a57c52;
  }

  .register-wrap .repassword-wrap {
    position: absolute;
    height: 53px;
    left: 75px;
    width: 355px;
    top: 403px;
    background-color: #d2c3aa;
    color: #a57c52;
    font-size: 150%;
    overflow: hidden;
    border: none;
    border-bottom: #a57c52 solid 1px;
  }

  .register-wrap .repassword-wrap::placeholder {
    color: #a57c52;
  }

</style>
